<template>
  <view class="piker-region">
    <view class="r-btns">
      <view class="btn cancel" @tap="handleCancel">取消</view>
      <view class="btn confirm" @tap="handleConfirm">确认</view>
    </view>
    <view class="r-tabs">
      <view class="t-list">
        <view v-for="(l,i) in labels" :key="i" class="t-item"
          :class="regions.find(e => e.id === l.id) ? 't-item--active':'' " @tap="handleTabChange(l)">{{l.name}}</view>
      </view>
    </view>
    <scroll-view class="r-view" scroll-y>
      <view class="v-list">
        <view v-for="(r,i) in regions" :key="i" @tap="handleRegionSelect(r)" class="v-item" :class="labels[0].id === r.id || labels[1].id === r.id || labels[2].id === r.id ? 'v-item--active': ''
         ">{{r.name}}</view>
      </view>
      <view class="v-empty" v-if="regions.length === 0">暂无数据</view>
    </scroll-view>
  </view>
</template>

<script>
  import {
    model
  } from '@/model';

  const {
    Request
  } = model;
  export default {
    name: '',
    props: {},
    data() {
      return {
        request: new Request(),
        labels: [],
        regions: []
      }
    },
    created() {
      this.firstInit()
    },
    methods: {
      firstInit() {
        this.getRegion().then(pData => {
          this.regions = pData
        })
      },
      handleTabChange(e) {
        this.getRegion(e.pId).then(data => {
          this.regions = data
        })
        if(this.labels.length === 3 ) {
          if(e.id === this.labels[1].id) {
            this.labels.splice(2, 1)
          }
        }
        if(e.level === 'province') {
          this.labels.splice(1, 1)
        }
      },
      handleRegionSelect(e) {
        // 香港澳门情况
        if ([34992, 35011].includes(e.pId)) {
          this.labels.splice(1, 1, e)
          return
        }
        // 中山，东莞情况
        if ([1100, 1895].includes(e.pId)) {
          this.labels.splice(2, 1, e)
          return
        }
        if (e.level === 'province') {
          this.labels.splice(0, 1, e)
          // 重选省份重置区，街道
          if (this.labels.length > 1) {
            if (e.id !== this.labels[1].pId) {
              this.labels.splice(1, this.labels.length - 1)
            }
          }
        }
        if (e.level === 'city') {
          this.labels.splice(1, 1, e)
        }
        if (e.level === 'district') {
          this.labels.splice(2, 1, e)
          return
        }
        this.getRegion(e.id).then(data => {
          this.regions = data
        })
      },
      handleConfirm() {
        let selectValues = this.labels
        this.$emit('confirm', {
          values: selectValues,
          pcds: {
            provinceId: this.$_.get(selectValues, '[0].id'),
            cityId: this.$_.get(selectValues, '[1].id'),
            districtId: this.$_.get(selectValues, '[2].id'),
            status: '2,3,4'
          }
        })
      },
      handleCancel() {
        this.$emit('cancel');
      },
      getRegion(pId = 0) {
        return this.request.do('open', 'enum', 'lst', {
          params: {
            key: 'sysRegion'
          },
          data: {
            query: {
              pId
            }
          }
        }).then(res => {
          if (res.status) {
            return res.data
          } else {
            throw new Error('API error:region.lstByPid')
          }
        })
      }
    }
  }
</script>

<style lang="less">
  .piker-region {
    height: 500rpx;

    .r-btns {
      margin-top: 10rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      font-size: 32rpx;
      font-weight: bold;
      color: #383838;

      .btn {
        width: 150rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
      }

      .confirm {
        color: #db187c;
      }
    }

    .r-tabs {
      margin-bottom: 20rpx;
      width: 100%;
      height: 90rpx;

      .t-list {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;

        .t-item {
          position: relative;
          width: 120rpx;
          margin: 0 10rpx;
          line-height: 60rpx;
          font-size: 30rpx;
          font-weight: bold;
          text-align: center;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;

          &--active {
            color: #db187c;
            &:after {
              content: "";
              display: block;
              position: absolute;
              bottom: 0;
              left: 22rpx;
              width: 80rpx;
              height: 3px;
              background: #db187c;
            }
          }
        }
      }
    }

    .r-view {
      width: 100%;
      height: 300rpx;

      .v-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        box-sizing: border-box;

        .v-item {
          width: 17%;
          margin: 10rpx 20rpx;
          padding: 10rpx;
          text-align: center;
          font-size: 30rpx;
          font-weight: bold;
          color: #a7a7a7;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;

          &--active {
            border-radius: 20rpx;
            background-color: #db187c;
            color: #fff;
          }
        }
      }

      .v-empty {
        width: 100%;
        height: 100rpx;
        text-align: center;
        line-height: 100rpx;
        font-size: 32rpx;
        color: #a1a1a1;
      }
    }
  }
</style>